<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>2d缩放</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .outer {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            margin: 0 auto;
            margin-top: 100px;
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            /*取值0-1,默认是1，里面的文字也会缩放,缩放是两端开始向中间或者向外，不是一端*/
            /*取值0就完全看不见了,负值的话，两个变互换了,x完全互换了,几乎不写负值*/
            /*缩放如果只写1个值两个方向都会缩放，所以写两个值更好*/
            transform: scale(-1,1);
        }
        .lt10 {
            /*缩放和位移一样不能作用在行内元素*/
            display: inline-block;
            font-size: 20px;
            /*浏览器最低12px，利用缩放让文字小于12px*/
            transform: scale(0.5);
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="inner">
        你好啊
    </div>
</div>
<span class="lt10">
    好
</span>
</body>
</html>